<script setup>
import store from '@/store';
import { computed, ref, watchEffect } from 'vue';

    const props = defineProps({
        selected:{
            type:String
        }
    })
    
    let selected = ref('')

    watchEffect(() => {
        props.selected && (selected.value = props.selected)
    })

    const tabPanes = computed(() => {
        return store.state.tabs
    })

    const emit = defineEmits(['tabClose', 'tabSelect'])

    // 点击标签
    const handleClick = (path) => {
        selected.value = path
        emit('tabSelect',path)
    }
    // 关闭标签
    const removeTab = (index,path) => {
        // 重新定位标签
        try{
            selected.value = tabPanes.value[index+1].path
        }catch(e){
            selected.value = tabPanes.value[index-1].path
        }
        // 删除标签
        if(!index == 0){
            tabPanes.value.splice(index,1)
        }
        // 事件传递
        emit('tabClose',selected.value)
    }
</script>
<template>
    <div class="scrollbar-flex-content">
        <el-tag 
            class="tab-item" 
            v-for="(item,index) in tabPanes" 
            :closable="!(item.path === '/index')"
            :key="index" 
            :effect="selected === item.path ? 'dark':'light'"
            :type="'info'"
            :style="selected === item.path ? 'color: #fff;':'color: #495060;'"
            :color="selected === item.path ? '#42B983':'#fff'"
            @click="handleClick(item.path)"
            @close="removeTab(index,item.path)"
        >{{ item.name }}</el-tag>
    </div>
</template>
<style scoped>
   .tab-item{
       margin-right: 6px;
       cursor: pointer;
       border-radius: unset;
       border: 1px solid #d8dce5 !important;
   }

   .scrollbar-flex-content{
        height: 100%;
        display: flex;
        align-items: center;
    }
</style>